<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <label for=""> id值:<input type="text" v-model='id'></label>
            <label for="">姓名: <input type="text" v-model='name'></label>
            <input type="button" value="提交" @click='add'>

            <p v-for ="(item, i ) in list " :key="item.id">
                <input type="checkbox" > {{item.id}}----{{item.name}}
            </p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    id:'',
                    name:'',
                    list:[
                        {id:1,name:'赵子龙'},
                        {id:2,name:'关云长'},
                        {id:3,name:'沈童'},
                        {id:4,name:'张飞'},
                        {id:5,name:'周瑜'}
                    ]
                },
                methods:{
                    add(){//添加方法
                        this.list.push({id:this.id,name:this.name})

                    }
                    

                }
            })
        </script>
    </body>
</html>